<template>
  <div class="header">
    <div class="user" v-if="isLogined">
      <div class="img">
        <img src="@/assets/avatar.webp" alt="">
      </div>
      <div class="name">
        <p>{{ info.nickname }}</p>
        <div class="account">{{ info.tel }}</div>
      </div>
    </div>
    <div class="user" v-else>
      <div class="img">
        <img src="@/assets/avatar1.png" alt="">
      </div>
      <div class="name">
        <p
        style="margin-top: 15px; color: white;"
        @click="$router.push({ name: 'login' })"
        >登录/注册</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { postUserInfoApi } from '@/api/haigou'

export default {
  name: 'MineHeader',
  computed: {
    ...mapGetters('user', ['isLogined']),
    ...mapState('user', ['userid'])
  },
  data () {
    return {
      info: ''
    }
  },
  methods: {
    async UserInfo () {
      try {
        const res = await postUserInfoApi({ userid: this.userid })
        this.info = res[0]
      } catch (error) {
        console.log(error.message)
      }
    }
  },
  mounted () {
    this.UserInfo()
  }
}
</script>
<style lang="scss" scoped>

.header {
  padding: 0.165rem 0;
  background: url('@/assets/bg.png') center 0 #f37d0f;
  background-size: 100%;
  .user {
    height: 0.5rem;
    display: flex;
    .img {
      background-position:center;
      margin: 0 0.13rem 0 0.32rem;
      width: 0.48rem;
      height: 0.48rem;
      overflow: hidden;
      border-radius: 100%;
      border: 3px solid hsla(0,0%,100%,.4);
      text-align: center;
      img {
        width: auto;
        height: 100%;
      }
    }
    .name {
      p {
        margin-top: 10px;
        color: #fff;
        font-size: 13px;
      }
      .account {
        font-size: 13px;
        color: #FFFFFF99;
      }
    }
  }
}
</style>
